<template>
  <div class style="height: 100%;padding: 10px 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  components: {},
  name: "chartlinechartgonglv1",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
  },
  watch: {
    "$store.state.daping.manageHeatPlant": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(heatPlantData) {
      var scale = this.$root.setting.scale;
      var pidArr20 = heatPlantData["pidArr20"];
      var pidArr8 = heatPlantData["pidArr8"];
      var heatPlantInfoMap = heatPlantData["heatPlantInfoMap"];
      var x = 3;

      var g_his_stime = 1579104000000; //2020.01.16 13:01:00
      var g_his_etime = 1579190399999; //2020.01.16 13:06:00 13:05:00有一条数据

      var nowHour20 = new Date().getHours();
      var stime20 = "";
      var etime20 = new Date().valueOf();
      if (nowHour20 >= 20) {
        //【2019年11月15日】今天20点到现在
        stime20 = new Date().setHours(20, 0, 0, 0).valueOf();
      } else {
        //【2019年11月15日】昨天20点到现在
        stime20 =
          new Date().setHours(20, 0, 0, 0).valueOf() - 1 * 24 * 60 * 60 * 1000;
      }

      let g_query_time_type = "history";
      if (g_query_time_type === "history") {
        stime20 = g_his_stime;
        etime20 = g_his_etime;
      }

      var heatData20 = [];

      // var basicData = heatPlantInfoMap.get(pidArr20[x]);

      var basicData = heatPlantInfoMap.filter((item) => {
        if (item.pid == pidArr20[x]) {
          return true;
        }
      })[0];
      var markLineData = basicData.buyHeat ? basicData.buyHeat : null;
      var hsName = basicData.name ? basicData.name : null;
      // console.log(markLineData, hsName)

      let options = {
        queries: [
          {
            // "metric": "pid,name,m_003qc",
            metric: "pid,m_003qc",
            schema: "monitor",
          },
        ],
        table: "heatPlant",
        orderBy: "aligntime",
        // "downsample":"1h-avg",
        search: "pid=" + pidArr20[x],
      };

      if (this.ishistory == "历史") {
        options = {
          queries: [
            {
              // "metric": "pid,name,m_003qc",
              metric: "pid,m_003qc",
              schema: "monitor",
            },
          ],
          table: "heatPlant",
          type: "history",
          orderBy: "aligntime",
          // "downsample":"1h-avg",
          startTime: this.timerangarr[0].getTime(),
          endTime: this.timerangarr[1].getTime(),
          search: "pid=" + pidArr8[x],
        };
      }

      axios.post("/open/queryDb", options).then((res) => {
        heatData20 = res.data['200'];
        var xData = [],
          yData = [],
          seriesData = [];
        for (var i in heatData20) {
          // xData.push(heatData20[i]["aligntime"].split(" ")[1]);
          // yData.push(heatData20[i]["m_003qc"]);
          // seriesData.push([heatData20[i]["aligntime"].split(" ")[1], Number(heatData20[i]["m_003qc"] / 3.6).toFixed(2)]);
          if (heatData20[i]["m_003qc"] || heatData20[i]["m_003qc"] == 0) {
            seriesData.push([
              heatData20[i]["aligntime"],
              Number(heatData20[i]["m_003qc"] / 3.6).toFixed(0),
            ]);
          }
        }
        // if (markLineObj20[pidArr20[x]])
        // console.log(pidArr20[x], "marklineData", markLineData)

        var gdxyOption = {
          title: {
            // text: titleName + "(MW)",
            text: hsName + "(MW)",
            textStyle: {
              color: "#fff",
              fontSize: 36 * scale,
              fontWeight: "bold",
            },
          },
          tooltip: {
            show: true,
            trigger: "axis",
            textStyle: {
              fontWeight: "normal",
              fontSize: 30 * scale,
            },
            // formatter: (params, ticket, callback) => {//【2019年11月21日】把markline的数据也放上去 显示差值
            //     var html = params[0].axisValueLabel
            //     + "<br>" + params[0].marker + params[0].seriesName+" : "+params[0].value[1];
            //     if(markLineData){
            //         html += "<br>"+ params[0].marker + "买热量 : "+markLineData
            //         +"<br>"+ params[0].marker + "差值:"+(params[0].value[1] - markLineData)
            //     }
            //     return html;
            // },
          },
          grid: {
            //统计图距离边缘的距离
            bottom: "0%",
            top: "20%",
            left: "5%",
            right: "5%",
            containLabel: true,
          },
          xAxis: [
            {
              //x轴
              type: "time", //数据类型为不连续数据category
              boundaryGap: false, //坐标轴两边是否留白
              minInterval: 3600 * 1 * 1000,
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: "#F5F5F5", //x轴颜色
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#F5F5F5",
                  fontSize: 30 * scale,
                },
                formatter: function (value, index) {
                  // 格式化成分:秒，只在0点刻度显示日期和时间
                  var date = new Date(value);
                  var hour = date.getHours();
                  var minute = date.getMinutes();

                  hour = hour < 10 ? "0" + hour : hour;
                  minute = minute < 10 ? "0" + minute : minute;

                  if (hour == "00" && minute == "00") {
                    return (
                      date.getMonth() +
                      1 +
                      "-" +
                      date.getDate() +
                      " " +
                      hour +
                      ":" +
                      minute
                    );
                  }
                  return hour + ":" + minute;
                },
              },
              axisTick: {
                show: false,
              }, //刻度点数轴
              splitLine: {
                show: false,
              }, //是否显示分隔线。默认数值轴显示，类目轴不显示。
              // data: xData,
            },
          ],
          yAxis: [
            {
              //y轴的相关设置
              type: "value", //y轴数据类型为连续的数据
              splitLine: {
                //y轴上的y轴线条相关设置
                show: false,
              },
              axisLine: {
                //y轴的相关设置
                show: true,
                lineStyle: {
                  color: "#F5F5F5", //y轴颜色
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#F5F5F5",
                  fontSize: 30 * scale,
                },
              },
              // name:"单位:MW",
              axisTick: {
                show: false,
              }, //刻度点数轴
              // max:'dataMax',
            },
          ],
          series: [
            {
              name: "热量",
              type: "line", //统计图类型为折线图
              smooth: true, //是否平滑曲线显示
              symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
              lineStyle: {
                //线条的相关设置
                normal: {
                  color: "#A6F4D0", // 线条颜色
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: "#A6F4D0", //tooltip里点的颜色
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(166,244,208,0.8)",
                      },
                      {
                        offset: 1,
                        color: "rgba(147,217,251,0.06)",
                      },
                    ],
                    false
                  ),

                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              // data: yData,
              data: seriesData,
              markLine: {},
            },
          ],
        };
        // console.log("markLineData",markLineData)
        if (markLineData != null) {
          gdxyOption.series[0].markLine = {
            symbol: "none", //去掉警戒线最后面的箭头
            label: {
              fontSize: 20 * scale,
              position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
              // formatter: '{b}: {d}',
            },
            data: [
              {
                name: "买热量",
                silent: false, //鼠标悬停事件  true没有，false有
                lineStyle: {
                  //警戒线的样式  ，虚实  颜色
                  type: "solid",
                  color: "#00F7AD",
                  width: 5,
                },
                yAxis: markLineData,
              },
            ],
          };
          gdxyOption.yAxis[0].max = Number(markLineData * 1.2).toFixed(0); //【2019年11月14日】李力确定的

          gdxyOption.tooltip.formatter = (params, ticket, callback) => {
            //【2019年11月21日】把markline的数据也放上去 显示差值
            var html =
              params[0].axisValueLabel +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              " : " +
              params[0].value[1];
            if (markLineData) {
              html +=
                "<br>" +
                params[0].marker +
                "买热量 : " +
                markLineData +
                "<br>" +
                params[0].marker +
                "差值:" +
                (params[0].value[1] - markLineData).toFixed(0);
            }
            return html;
          };
        }
        this.myChart.setOption(gdxyOption);
        x++;
        if (x == pidArr20.length) {
          //如果到末尾了 则重头开始
          x = 0;
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>